---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import PostCard from "../components/PostCard.vue"
---

<Layout title="Welcome to Astro.">
  <main>
    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
    <p class="instructions">
      Check out the <code>src/pages</code> directory to get started.<br />
      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
    </p>
    <ul role="list" class="link-card-grid">
      <Card href="https://docs.astro.build/" title="Documentation"
        body="Learn how Astro works and explore the official API docs." />
      <Card href="https://astro.build/integrations/" title="Integrations"
        body="Supercharge your project with new frameworks and libraries." />
      <Card href="https://astro.build/themes/" title="Themes"
        body="Explore a galaxy of community-built starter themes." />
      <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
    </ul>
    <ul class="list-decimal list-inside">
      <li th:text="#{foo}"></li>
      <li th:text="#{bar}"></li>
      <li th:text="#{hello('Ryan Wang')}"></li>
    </ul>
    <PostCard client:visible />
    <p th:each="post : ${postFinder.list(1, 10)}">
      <span th:text="${post.name}">Onions</span>
    </p>
  </main>
</Layout>

<style>
  :root {
    --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
  }

  h1 {
    margin: 2rem 0;
  }

  main {
    margin: auto;
    padding: 1em;
    max-width: 70ch;
  }

  .text-gradient {
    font-weight: 900;
    background-image: var(--astro-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 200%;
    background-position-y: 100%;
    border-radius: 0.4rem;
    animation: pulse 4s ease-in-out infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      background-position-y: 0%;
    }

    50% {
      background-position-y: 80%;
    }
  }

  .instructions {
    line-height: 1.6;
    margin: 1rem 0;
    background: #4f39fa;
    padding: 1rem;
    border-radius: 0.4rem;
    color: var(--color-bg);
  }

  .instructions code {
    font-size: 0.875em;
    border: 0.1em solid var(--color-border);
    border-radius: 4px;
    padding: 0.15em 0.25em;
  }

  .link-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
    gap: 1rem;
    padding: 0;
  }
</style>
